<template>
  <div>
    <div v-if="type == 1" class="grouptitle items-center">
      <img class="grouptitle-icon" :src="url" />
      <!-- 标题 -->
      <div class="grouptitle-text">
        <slot></slot>
      </div>
    </div>
    <div v-if="type == 2" class="grouptitle items-center">
      <div class="grouptitle-num">{{ sort || 1 }}</div>
      <!-- 标题 -->
      <div class="grouptitle-text">
        <slot></slot>
      </div>
    </div>
    <div v-if="type == 3" class="grouptitle items-center">
      <div class="grouptitle-point"></div>
      <!-- 标题 -->
      <div class="grouptitle-text" style="font-weight: 400">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script setup name="grouptitle" lang="ts">
// 属性
const props = withDefaults(
  defineProps<{
    src?: string;
    type?: string | number;
    sort?: string;
    
  }>(),
  {
    src: "",
    type: 1,
  }
);

const url = computed(() => {
  return `${process.env.NODE_ENV != "development" ? "/fx" : ""}/image/mvp/${props.src}`;
});
</script>
<style lang="scss" scoped>
.grouptitle {
  &-icon {
    width: 18 * 2px;
    height: 18 * 2px;
    margin-right: 10 * 2px;
  }
  &-num {
    background-color: #007bff;
    width: 14 * 2px;
    height: 14 * 2px;
    border-radius: 14 * 2px;
    font-size: 11 * 2px;
    text-align: center;
    color: #fff;
    line-height: 14 * 2px;
    margin-right: 10 * 2px;
  }
  &-point {
    width: 4 * 2px;
    height: 4 * 2px;
    background: #00e7b5;
    margin-right: 5 * 2px;
  }
  &-text {
    color: #007bff;
    font-size: 13 * 2px;
    font-weight: 590;
  }
}
</style>
